<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>

用户：<input type="text" name="username"/><br>
密码：<input type="text" name="password"/><br>
验证码<input type="text" name="validateCode"/><img src="#" id="validateImg" onclick="refreshCode()"><br>
<button>登录</button>


<script src="md5.js"></script>
<script src="jquery.js"></script>

<script>
    //页面一加载的时候，使用Ajax发送请求到后台，获得验证码
    $.ajax({
        url:"http://localhost:8083/validateCode",
        success:function (data,status,xmlhttp){
            //响应的数据
            $("#validateImg").attr("src",data.captcha);
            var userKey = xmlhttp.getResponseHeader("userKey");
            localStorage.setItem("userKey",userKey);
        }
    })

    function refreshCode(){
        $.ajax({
            url:"http://localhost:8083/validateCode",
            success:function (data,status,xmlhttp){
                //响应的数据
                $("#validateImg").attr("src",data.captcha);
            }
        })
    }

    $("button").bind("click",function(){
        //用户名，密码，验证码，userKey传递登录验证的后台
        var userKey = localStorage.getItem("userKey");

        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        var validateCode = $("input[name='validateCode']").val();

        //前端的md5加密
        var fronPassword = hex_md5(password);//第一次加盐

        $.ajax({
            url:"http://localhost:8083/login",
            data:{"username":username,"password":fronPassword,"validateCode":validateCode},
            headers:{"userkey":userKey},
            type:"post",
            success:function(data){
                //登录的结果：验证码错误、用户名错误、密码错误、登录成功

            }
        })
    })

</script>

</body>
</html>